<template>
  <div class="nav">
    <div class="hedar-box">
      <div class="logo_ul">
        <div class="logo_box">
          <a href="#/">
            <img src="../assets/LOGO@2x.png" />
          </a>
        </div>
        <ul class="hedar-ul">
          <router-link tag="li" exact :to="{ path: '/Homes' }">
            <div>首页</div>
          </router-link>
          <router-link tag="li" to="/roll">
            <div>ROLL房</div>
          </router-link>
          <router-link v-if="login" tag="li" to="/Share">
            <div>分享</div>
          </router-link>
          <li @click="get_nologin()" v-else>
            <div>分享</div>
          </li>
          <router-link tag="li" to="/lucky">
            <div>追梦</div>
          </router-link>
          <router-link v-if="login" tag="li" to="/fight">
            <div>对战</div>
          </router-link>
          <li @click="get_nologin()" v-else>
            <div>对战</div>
          </li>
          <li @click="get_shp()">
            <div>商城</div>
          </li>
          <!-- <router-link tag="li" to="/shopmall">
            <div>商城</div>
          </router-link>-->
        </ul>
      </div>
      <div class="stateModle">
        <div @click="get_arr()">
          <div>
            <img src="../assets/Recharge_icon.png" />
          </div>
          <span>充值</span>
        </div>
        <div class="user_s" v-if="login">
          <div class="user_s1">
            <p>{{ this.$store.state.user.nickName }}</p>
            <p>
              <img class="user_s1_2" src="../assets/money-icon.png" />
              {{ this.$store.state.user.money }}
            </p>
          </div>
          <div @click="getuser()" class="hedar-img">
            <img :src="this.$store.state.user.photo" />
          </div>
          <ul class="pop_box">
            <router-link tag="p" to="/user">
              <span class="iconfont icon-wode"></span>个人中心
            </router-link>
            <router-link tag="p" to="/mybackpack">
              <span class="iconfont f24 icon-icon_beibao"></span>我的背包
            </router-link>
            <p @click="get_out($event)">
              <span class="iconfont f20 icon-tuichu"></span>退出登录
            </p>
          </ul>
        </div>
        <div v-else>
          <div>
            <img src="../assets/register_hedar_icon.png" />
          </div>
          <p>
            <span @click="get_register($event)">注册</span> /
            <span class="c1ed7ff" @click="get_login($event)">登录</span>
          </p>
          <div @click="get_login($event)" class="hedar-img"></div>
        </div>
        <div  @click="downloadgame()" class="game-download"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { wsUrl } from "../common/config.js";
import Bus from "../../config/bus.js";
export default {
  props: ["fData"],
  data() {
    return {
      download: true,
      websock: null,
      login: false,
      navkey: null,
    };
  },
  methods: {
    downloadgame() {
      window.open("https://www.csgo.com.cn/download/index.html", "_blank");
    },
    get_shp() {
      // window.open('https://wmsjdj.tmall.com/category-1465876517.htm','_blank')
    },
    get_nologin() {
      if (!this.login) {
        Bus.$emit("get_login", event.target);
      }
    },
    getuser(id) {
      this.$router.push({
        path: `/user`,
      });
    },
    get_register(event) {
      Bus.$emit("get_register", event.target);
    },
    get_login() {
      Bus.$emit("get_login", event.target);
    },
    navigate() {
      console.log("99999");
    },
    get_arr() {
      this.$router.push("/accountrecharge");
    },
    get_user() {
      var token = window.localStorage.getItem("token");
      this.$api.get("/api/user/tokenByInfo", null, (r) => {
        if (r.code == 401) {
          this.$router.push("/");
          location.reload();
          window.localStorage.removeItem("token");
          this.$confirm({
            type: "提示",
            msg: r.msg,
          });
        } else if (r.code == 200) {
          var user = r.data;
          this.$store.commit("signin_success", user);
        }
      });
    },
    get_out() {
      // this.$router.push('/');
      this.login = false;
      this.websocketclose();
      this.$api.get("/api/user/logout", null, (r) => {
        this.$confirm({
          type: "提示",
          time: "1",
          msg: "退出成功！",
        });
      });
      window.localStorage.removeItem("token");
      location.reload();
    },
    initWebSocket(id) {
      this.websock = new WebSocket(wsUrl + "/server/" + id); //这个连接ws://固定，后面的根据自己的IP和端口进行改变，我设置监听的就是8081
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onopen = this.websocketonopen;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      // 连接建立之后执行send方法发送数据，这个和自己的后端沟通好需要传什么数据，我的是要进行token验证
      let token = window.localStorage.getItem("id");
      let data = {
        type: "REGISTER",
        data: { token: token },
      };
      // this.websock.send(JSON.stringify(data));
      // this.websock.send("open");
      // console.log('444444')
    },
    websocketonerror() {
      //连接错误
      console.log("WebSocket连接失败");
    },
    websocketonmessage(res) {
      // 数据接收
      console.log(res.data);
      if (res.data == 0) {
        this.$confirm({
          type: "提示",
          time: "2",
          msg: "异地登陆，当前设备已退出登录！",
        });
        this.login = false;
        this.websocketclose();
        this.$api.get("/api/user/logout", null, (r) => {});
        window.localStorage.removeItem("token");
        setTimeout(() => {
          location.reload();
        }, 1000);
      }
      // console.log(JSON.parse(e.data));
    },
    websocketclose(e) {
      // 关闭连接
      console.log("已关闭连接", e);
      // this.get_out()
    },
  },

  destroyed() {
    this.websock.close(); // 页面销毁后断开websocket连接
    alert(1);
  },

  mounted() {
    const that = this;
    var w = document.documentElement.clientWidth;
    if (w < 1700) {
      that.download = false;
    } else {
      that.download = true;
    }
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
        if (that.screenWidth <= 1700) {
          that.download = false;
        } else {
          that.download = true;
        }
      })();
    };
  },
  created() {
    var id = window.localStorage.getItem("id");
    var token = window.localStorage.getItem("token");
    this.login = token;
    console.log(id, token);
    if (token) {
      console.log(this.websock);
      this.get_user(token);
      this.initWebSocket(id);
    }
    Bus.$on("get_WebSocket", (target) => {
      var id = window.localStorage.getItem("id");
      var token = window.localStorage.getItem("token");
      this.initWebSocket(id);
      this.login = id;
      this.get_user(token);
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.f20 {
  font-size: 20px;
}
.logo_ul {
  display: flex;
  margin-left:200px;
}
.user_s1 > p:nth-child(2) {
  display: flex;
  align-items: center;
  margin-top: 10px;
  justify-content: flex-end;
  font-size: 16px;
  line-height: 14px;
}
.user_s1_2 {
  width: 16px !important;
  height: 16px;
  margin-right: 5px;
}
.user_s1 {
  width: 100px !important;
  height: 100% !important;
  margin-right: 0 !important;
  padding-top: 30px;
}
.user_s1 p {
  width: 100px !important;
  font-size: 16px;
  text-align: right;
}
.user_s {
  position: relative;
}
.user_s:hover .pop_box {
  display: block;
}
.pop_box {
  position: absolute;
  top: 70px;
  width: 150px;
  right: 0;
  display: none;
}
.pop_box > p {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pop_box > p > span {
  width: 28px;
}
.pop_box > p:hover {
  background-color: #85b8fa;
}
.iconfont {
  margin-right: 2px;
}
.f24 {
  font-size: 24px;
  /* line-height: 4px; */
}
.nav {
  background-color: #000;
  position: relative;
  min-width: 1220px;
  max-width: 2600px;
  height: 70px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.game-download {
  height: 70px;
  width: 235px;
  background-image: url(../assets/game-download_icon.png);
  background-repeat: no-repeat;
  background-position: 0px -36px;
  cursor: pointer;
  margin-left:100px;
}
.stateModle {
  display: flex;
  color: #fff;
  /* margin-left: 160px; */
  font-size: 18px;
  position: relative;
}
.hedar-img {
  width: 53px;
  height: 53px;
  /* background: #1D212C; */
  border-radius: 50%;
  overflow: hidden;
  margin-left: 30px;
}
.stateModle > div {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.stateModle > div .c1ed7ff {
  color: #1ed7ff;
}
.stateModle > div:first-child {
  margin-right: 50px;white-space:nowrap;
}
.stateModle > div > div:first-child {
  width: 24px;
  height: 24px;
  margin-right: 11px;white-space:nowrap;
}
.stateModle img {
  width: 100%;
  height: 100%;
}
.hedar-box {
  /* width: 100%; */
  height: 70px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.hedar-ul {
  display: flex;
  padding: 0 !important;
}
.hedar-ul li {
  padding: 0 5px;
  list-style: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  opacity: 0.8;
  align-items: center;
  font-size: 18px;
  border-bottom: 2px solid #000000;
  margin: 0 15px;white-space:nowrap;
}
.hedar-ul li:hover {
  border-bottom: 2px solid #ffffff;
  transition: all 0.5s;
}
.logo_box {
  height: 100%;
  color: #bfbfd6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 146px;
  height: 55px;
  margin-top: 5px;
}
.logo_box a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo_box img {
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.activ {
  opacity: 1 !important;
  border-bottom: 2px solid #ffffff !important;
}
.pop_box p {
  border-bottom: 2px solid #000000 !important;
}
.pop_box .activ {
  border-bottom: 2px solid #000000 !important;
}
</style>
